﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/data</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
            div {
                margin: 3px;
                width: 50px;
                height: 50px;
                position: absolute;
                left: 10px;
                top: 300px;
                background-color: yellow;
                display:none;
            }
            div.newcolor {
                background-color: red;
            }
  		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		    console.log( "jQuery version: " + $.fn.jquery );
        </script>
    </head>
    <body>
        <h1>jQuery/data部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">jQuery.hasData()</td>
                <td>true if element附加有数据.</td>
            </tr>
            <tr>
                <td class="syntax">.data()</td>
                <td>获取和设置附加到element上的数据.</td>
            </tr>
            <tr>
                <td class="syntax">.removeData()</td>
                <td>清楚附加数据.</td>
            </tr>
            <tr>
                <td class="syntax">.clearQueue()</td>
                <td>清空queue中尚未执行的function. 默认queue是fx.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.data()</td>
                <td>取出或将数据附加到指定element上. </td>
            </tr>
            <tr>
                <td class="syntax">jQueue.removeData()</td>
                <td>清楚某element附加的data.</td>
            </tr>
            <tr>
                <td class="syntax">.queue()</td>
                <td>获取或入列function. 默认是fx</td>
            </tr>
            <tr>
                <td class="syntax">.dequeue()</td>
                <td>从queue中取出下一个function并执行. 默认queue是fx.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.queue()</td>
                <td>将针对某element的function加入queue. 默认是fx.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.dequeue()</td>
                <td>取出queue中匹配指定element的下一个function, 并执行.</td>
            </tr>
        </table>
        <p>jQuery默认使用名为fx的queue管理相关动画操作.</p>
        <p></p>
    <hr/>
    请打开console观察输出.
    
    
	<script>
        var d = $("body");
        d.data("action", "hello");
        d.data("name", {adj: "new", who: "world"});
        console.log(d.data("action")+","+d.data("name").adj +" "+d.data("name").who + "!");
    </script>

    <hr/>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <div id="rect"></div>

    <script>
        $("#start").click(function(){
            console.log("start");
            var divs=$("#rect")
                .show("slow")
                .animate({left:"+=200"}, 5000);
            divs.queue(function(){
                $(this).addClass("newcolor");
                $(this).dequeue();              //继续取下一个function执行. 若无此语句, 则会停止在此.
            });
            divs.animate({left:"-=200"}, 1500);
            divs.queue(function(){
                $(this).removeClass("newcolor");
                $(this).dequeue();
            });
            divs.slideUp();
        });

        $("#stop").click(function(){
            $("#rect").queue([]);
            //$("#rect").clearQueue();
            $("#rect").stop();      //停止animation.
        });

    </script>

    </body>
</html>
